<template>
    <Modal
            v-model="modalShow"
            width="700"
            :title="getModalTitle"
            :mask-closable="false"
    >
        <Carousel v-if="getListCount" v-model="carouselValue">
            <CarouselItem v-for="(item, index) in showImgList" :key="index">
                <div style="text-align: center;">
                    <img :src="item.url" :height="500">
                </div>
            </CarouselItem>
        </Carousel>
        <div class="hide-box" v-if="getListCount">
            <img id="print" :src="showImgList[carouselValue].url" :height="500">
        </div>
        <div slot="footer">
            <Button type="text" @click="cancelAction">取消</Button>
            <Button type="success" :loading="loading" v-print="'#print'">打印</Button>
        </div>
    </Modal>
</template>

<script>

export default {
  name: 'PrintModal',
  data () {
    return {
      modalShow: false,
      loading: false,
      modalTitle: '',
      carouselValue: 0
    }
  },
  props: {
    showImgList: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  computed: {
    getModalTitle () {
      return '打印【' + this.modalTitle + '】图片'
    },
    getListCount () {
      return this.showImgList.length > 0
    }
  },
  methods: {
    modalAction (val) {
      this.modalTitle = val
      this.modalShow = !this.modalShow
    },
    cancelAction () {
      this.modalShow = false
    }
  }
}
</script>

<style scoped>
    .hide-box {
        text-align: center;
        position: absolute;
        top: 0px;
        z-index: -9999;
    }
</style>
